import React, { useState } from 'react'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Card, Switch, Space, Divider, Alert } from 'antd'

const AdminPanel = () => (
    <Card className='w-50'>
        <p>欢迎回来，adminer</p>
    </Card>
)

const LoginForm = () => (
    <Card className='w-50'>
        <p>请先登录</p>
    </Card>
)

const Item = ({ name, isPacked }:any ) => {
    return (
        <li className="item">
            {name} {isPacked && '✔'}
        </li>
    );
}


const View: React.FC = () => {
    let [isLoggedIn, setLogin] = useState(true)
    const onChange = (checked: boolean) => {
        setLogin(checked)
    }

    return (
        <>
            <Divider orientation="left">条件渲染</Divider>
            <Space direction="vertical">
                <p>写法一：</p>
                <div>
                    {isLoggedIn ? (
                        <AdminPanel />
                    ) : (
                        <LoginForm />
                    )}
                </div>
                
                <p>写法二：</p>
                <div>
                    {isLoggedIn && <AdminPanel />}
                </div>

                <Switch onClick={onChange} checkedChildren="登录" unCheckedChildren="未登录" defaultChecked />
            </Space>

            <Divider orientation="left">条件渲染 进阶</Divider>
            <Space direction='vertical'>
                <Alert
                    message="在这个示例中，JavaScript 的 && 操作符将会条件渲染一个复选标签："
                    description=""
                    type="info"
                />
                <Alert
                    message="当 JavaScript && 表达式 的左侧（我们的条件）为 true 时，它则返回其右侧的值（在我们的例子里是勾选符号）。但条件的结果是 false，则整个表达式会变成 false。在 JSX 里，React 会将 false 视为一个“空值”，就像 null 或者 undefined，这样 React 就不会在这里进行任何渲染"
                    description="例如，一个常见的错误是 messageCount && <p>New messages</p>。其原本是想当 messageCount 为 0 的时候不进行渲染，但实际上却渲染了 0。为了更正，可以将左侧的值改成布尔类型：messageCount > 0 && <p>New messages</p>。"
                    type="warning"
                />
                <section>
                    <h1>Sally Ride's Packing List</h1>
                    <ul>
                        <Item
                            isPacked={true}
                            name="Space suit"
                        />
                        <Item
                            isPacked={true}
                            name="Helmet with a golden leaf"
                        />
                        <Item
                            isPacked={false}
                            name="Photo of Tam"
                        />
                    </ul>
                </section>
            </Space>

        </>
    )
}

export default View